﻿<!DOCTYPE HTML>
<html>
<head>
<#include "head.html">
<script src="${contextPath}/common/echart/echarts.js"></script>
<script src="${contextPath}/common/date/WdatePicker.js"></script>
<title>流量报表</title>
</head>
<!-- 资源列表 -->
<body>


 	  <input type="text"  id="date" onFocus="WdatePicker({onpicking:changeDate})" class="Wdate"/>	
      <div class="tabwrap" id="main1" style="height: 400px;">
	  </div>
	  
      <div class="tabwrap" id="main2" style="height: 400px;">
	  </div>

</body>
<script type="text/javascript" src="${contextPath}/common/login/jquery.min.js"></script>
<script type="text/javascript">
var basePath="${request.contextPath}";

//点击日期的回调函数
function changeDate(dp){
	var date = dp.cal.getNewDateStr();
	loadData1(date);
}

$(function(){
	loadData1(new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate());
	loadData2();
});

function loadData1(time){
	$.ajax({
		type:"post",
		url:basePath+"/Browse/flowday.do",
		data:{time:time},
		success:function(data){
			var title=time+"流量统计时间表";
			initChart1("main1",data,title);
		}
	});
};


function loadData2(){
	$.ajax({
		type:"post",
		url:basePath+"/Browse/today.do",
		success:function(data){
			$.ajax({
				type:"post",
				url:basePath+"/Browse/yesterday.do",
				success:function(yesterday){
					initChart2("main2",data,yesterday);
				}
			});
			
		}
	});
};

//统计当天的报表
function initChart1(targetId,json,title){
	var count=[];
	var hour=[];
	
	for(var i=0;i<json.length;i++){
		count.push(json[i].count);
		hour.push(json[i].hour+":00");
	}
	
	
	require.config({
      paths: {
          echarts: basePath+'/common/echart'
      }
  });
  require(
      [
          'echarts',
          'echarts/chart/line',
          'echarts/chart/bar',
			'echarts/chart/pie'
      ],
     function (ec) {
          var myChart = ec.init(document.getElementById(targetId));
          var option = {
          	    title: {
          	        text: ''
          	    },
          	    tooltip : {
          	        trigger: 'axis',
          	        axisPointer: {
          	            type: 'cross',
          	            label: {
          	                backgroundColor: '#6a7985'
          	            }
          	        }
          	    },
          	    legend: {
          	        data:[title]
          	    },
          	    toolbox: {
          	        feature: {
          	            saveAsImage: {}
          	        }
          	    },
          	    grid: {
          	        left: '3%',
          	        right: '4%',
          	        bottom: '3%',
          	        containLabel: true
          	    },
          	    xAxis : [
          	        {
          	            type : 'category',
          	            boundaryGap : false,
          	       		data : hour
          	        }
          	    ],
          	    yAxis : [
          	        {
          	            type : 'value'
          	        }
          	    ],
          	    series : [
          	        {
          	            name:'今日用户访问量',
          	            type:'line',
          	            stack: '总量',
          	            areaStyle: {normal: {}},
          	            data : count
          	        }
          	    ]
          	};
          //添加报表数据给echart
			myChart.setOption(option);
          //初始化echart的config对象
			var ecConfig = require('echarts/config');
          //执行config的回调函数
			myChart.on(ecConfig.EVENT.CLICK);
      }
  );
};



//昨天  今天  用户统计
function initChart2(targetId,today,yesterday){
	
	var todayCount=[];
	var todayHour=[];
	
	var yesterdayCount=[];
	var yesterdayHour=[];
	
	for(var i=0;i<today.length;i++){
		todayCount.push(today[i].count);
		todayHour.push(today[i].hour+":00");
	}
	
	for(var i=0;i<yesterday.length;i++){
		yesterdayCount.push(yesterday[i].count);
		yesterdayHour.push(yesterday[i].hour+":00");
	}
	
	
	require.config({
      paths: {
          echarts: basePath+'/common/echart'
      }
  });
  require(
      [
          'echarts',
			'echarts/chart/line'
      ],
     function (ec) {
          var myChart = ec.init(document.getElementById(targetId));
          var colors = ['#5793f3', '#d14a61', '#675bba'];
          var option = {
              color: colors,

              tooltip: {
                  trigger: 'none',
                  axisPointer: {
                      type: 'cross'
                  }
              },
              legend: {
                  data:['昨天', '今天']
              },
              grid: {
                  top: 70,
                  bottom: 50
              },
              xAxis: [
                  {
                      type: 'category',
                      axisTick: {
                          alignWithLabel: true
                      },
                      axisLine: {
                          onZero: false,
                          lineStyle: {
                              color: colors[1]
                          }
                      },
                      axisPointer: {
                          label: {
                              formatter: function (params) {
                                  return '用户访问量  ' + params.value
                                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                              }
                          }
                      },
                      data: yesterdayHour
                  },
                  {
                      type: 'category',
                      axisTick: {
                          alignWithLabel: true
                      },
                      axisLine: {
                          onZero: false,
                          lineStyle: {
                              color: colors[0]
                          }
                      },
                      axisPointer: {
                          label: {
                              formatter: function (params) {
                                  return '用户访问量  ' + params.value
                                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                              }
                          }
                      },
                      data:  todayHour
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                  {
                      name:'昨天',
                      type:'line',
                      xAxisIndex: 1,
                      smooth: true,
                      data: yesterdayCount
                  },
                  {  
                      name:'今天',
                      type:'line',
                      smooth: true,
                      data: todayCount
                  }
              ]
          };
          //添加报表数据给echart
			myChart.setOption(option);
          //初始化echart的config对象
			var ecConfig = require('echarts/config');
          //执行config的回调函数
			myChart.on(ecConfig.EVENT.CLICK);
      }
  );
};


</script>
</html>